<template>
  <div class="m-add-type">
    <!-- 新增类型管理 -->
    <w-form-validate @on-validate="productSubmit">
      <div>
        <div class="add-name">
          <span class="title">类型名称</span>
          <div class="name">
            <w-input holder="请输入" rule="isEmpty" error="请输入" v-model="addParams.name"></w-input>
          </div>
        </div>
        <!-- 产品参数 -->
        <div class="m-product">
          <w-mange-title :title="`产品参数`"></w-mange-title>
          <div>
            <w-table :columns="paramsColumns">
              <tr v-for="(proParams, paramsIndex) in addParams.productParams" :key="paramsIndex">
                <td>
                  <div class="sequence">
                    <w-input holder="请输入" rule="isEmpty|onlyInt" error="请输入|输入纯数字" v-model="proParams.sequence"></w-input>
                  </div>
                </td>
                <td>
                  <div class="params-name">
                    <w-input holder="请输入" rule="isEmpty" error="请输入" v-model="proParams.name"></w-input>
                  </div>
                </td>
                <td>
                  <div class="params-info">
                    <w-input holder="请输入" rule="isSign" error="请输入|格式错误" v-model="proParams.value"></w-input>
                  </div>
                </td>
                <td>
                  <div>
                    <!-- 文本类型 -->
                    <w-radio v-model="proParams.choice" :name='`choice${paramsIndex}`' :label="0">输入框</w-radio>
                    <w-radio v-model="proParams.choice" :name='`choice${paramsIndex}`' :label="1">单选框</w-radio>
                    <w-radio v-model="proParams.choice" :name='`choice${paramsIndex}`' :label="2">复选框</w-radio>
                  </div>
                </td>
                <td>
                  <div>
                    <div class="m-radio">
                      <w-radio v-model="proParams.required" :name="`参数必填项${paramsIndex}`" :label="0">是</w-radio>
                    </div>
                    <div class="m-radio">
                      <w-radio v-model="proParams.required" :name="`参数必填项${paramsIndex}`" :label="1">否</w-radio>
                    </div>
                  </div>
                </td>
                <td>
                  <w-checkbox v-model="proParams.display" :label="`params${paramsIndex}`"></w-checkbox>
                </td>
                <td>
                  <div class="options">
                    <div class="del cur" @click="addParams.productParams.splice(paramsIndex, 1)">
                      <span class="icon-del"></span>
                      <span>删除</span>
                    </div>
                  </div>
                </td>
              </tr>
            </w-table>
            <div class="new-product">
              <w-button type="option" @on-click="onNewAddProduct('params')">新增</w-button>
            </div>
          </div>
        </div>
        <!-- 产品属性 -->
        <div class="m-product">
          <w-mange-title :title="`产品属性`"></w-mange-title>
          <div>
            <w-table :columns="paramsColumns">
              <tr v-for="(pro, proIndex) in addParams.productProperties" :key="proIndex">
                <td>
                  <div class="sequence">
                    <w-input holder="请输入" rule="isEmpty|onlyInt" error="请输入|输入纯数字" v-model="pro.sequence"></w-input>
                  </div>
                </td>
                <td>
                  <div class="params-name">
                    <w-input holder="请输入" rule="isEmpty" error="请输入" v-model="pro.name"></w-input>
                  </div>
                </td>
                <td>
                  <div class="params-info">
                    <w-input holder="请输入" rule="isSign" error="请输入|格式错误" v-model="pro.value"></w-input>
                  </div>
                </td>
                <td>
                  <div>
                    <!-- 文本类型 -->
                    <w-radio v-model="pro.choice" :name='`type${proIndex}`' :label="0">输入框</w-radio>
                    <w-radio v-model="pro.choice" :name='`type${proIndex}`' :label="1">单选框</w-radio>
                    <w-radio v-model="pro.choice" :name='`type${proIndex}`' :label="2">复选框</w-radio>
                  </div>
                </td>
                <td>
                  <div>
                    <div class="m-radio">
                      <w-radio :name="`属性必填项${proIndex}`" :label="0" v-model="pro.required">是</w-radio>
                    </div>
                    <div class="m-radio">
                      <w-radio :name="`属性必填项${proIndex}`" :label="1" v-model="pro.required">否</w-radio>
                    </div>
                  </div>
                </td>
                <td>
                  <w-checkbox :label="`pro${proIndex}`" v-model="pro.display"></w-checkbox>
                </td>
                <td>
                  <div class="options">
                    <div class="cur del" @click="addParams.productProperties.splice(proIndex, 1)">
                      <span class="icon-del"></span>
                      <span>删除</span>
                    </div>
                  </div>
                </td>
              </tr>
            </w-table>
            <div class="new-product">
              <w-button type="option" @on-click="onNewAddProduct('propertys')">新增</w-button>
            </div>
          </div>
        </div>
      </div>
      <div class="productSubmit">
        <button class="btn" type="submit">提交</button>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { apiClassifyMange } from 'js/api'

export default {
  data() {
    return {
      paramsColumns: [
        {title: '排序', width: '6%'},
        {title: '参数名称', width: '16%'},
        {title: '参数可选值（多个属性值用英文“,” 分割）', width: 'auto'},
        {title: '文本类型', width: '10%'},
        {title: '是否必填', width: '14%'},
        {title: '是否显示', width: '8%'},
        {title: '操作', width: '10%'}
      ],
      addParams: {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || '', // 更新时传入
        name: '',
        valueList: [],
        // sequence: 0,
        // 产品参数
        productParams: [
          {
            name: '',
            value: '',
            required: 0,
            choice: '0',
            sequence: '0',
            display: true,
            paType: 'param'
          }
        ],
        // 产品属性
        productProperties: [
          {
            name: '',
            value: '',
            required: 0,
            sequence: '0',
            choice: '0',
            display: true,
            paType: 'attri'
          }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      apiClassifyMange.apiGoodsClassifyUpdate(this.addParams).then(data => {
        this.addParams = Object.assign({}, this.addParams, data.data.bean || {})
        // 清空数组
        this.addParams.productParams = []
        this.addParams.productProperties = []
        // 根据类型，重新组装数据结构
        if (data.data.bean.glist && data.data.bean.glist.length) {
          data.data.bean.glist.forEach(pro => {
            if (pro.paType == 'param') {
              this.addParams.productParams.push(pro)
            } else if (pro.paType == 'attri') {
              this.addParams.productProperties.push(pro)
            }
          })
        }
      })
    }
  },
  methods: {
    /**
     * 新增产品参数、属性
     */
    onNewAddProduct(type) {
      if (type == 'params') {
        this.addParams.productParams.push({'name': '', 'value': '', 'required': 0, 'choice': '0', 'sequence': '0', 'display': true, 'paType': 'param'})
        return
      }
      this.addParams.productProperties.push({'name': '', 'value': '', 'required': 0, 'choice': '0', 'sequence': '0', 'display': true, 'paType': 'attri'})
    },
    /**
     * 提交
     */
    productSubmit() {
      let flag = true
      this.addParams.valueList = this.addParams.productParams.concat(this.addParams.productProperties) // 合并参数
      // 判断，若产品参数、属性长度>1，则判断必填字段校验
      if (this.addParams.valueList && this.addParams.valueList.length > 0) {
        console.log(this.addParams.valueList)
        this.addParams.valueList.forEach(v => {
          if (v.name == '') {
            this.$toast('参数名称必填')
            flag = false
          }
          if ((v.choice != '0' && v.choice != '') && v.value == '') {
            this.$toast('若文本类型为单选框或复选框时，参数必填')
            flag = false
          }
        })
      }
      let tip = this.addParams.id ? '修改类型成功！' : '新增类型成功！'
      if (!flag) return
      apiClassifyMange.apiGoodsClassifyAdd(this.addParams).then(data => {
        this.$toast(tip, () => {
          this.$router.push(`type?three=${this.$route.query.three}`)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.m-product {
  .new-product {
    .btn {
      width: 70px;
      font-size: 12px;
      border: 1px solid #9E9E9E;
    }
  }
  .table {
    td {
      height: 50px;
    }
  }
  .table {
    .w-input .error-tip {
      margin-top: 26px;  
    }
  }
}

.productSubmit {
  .btn {
    width: 140px;
  }
}
</style>


<style lang="scss" scoped>
.m-add-type {
  .title {
    font-size: 12px;
  }
}
.add-name {
  margin: 30px 0 0 20px;
  .name {
    width: 200px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
  }
}
.m-product {
  .sequence {
    text-align: center;
  }
  .params-name {
    width: 80%;
    margin: 0 auto;
  }
  .params-info {
    width: 80%;
    margin: 0 auto;
  }
  .m-radio {
    display: inline-block;
    margin: 0 10px;
  }
  .new-product {
    margin: 14px 0 10px 10px;
  }
}
.productSubmit {
  text-align: center;
  margin-top: 40px;
}
.options {
  display: inline-block;
  text-align: center;
  color: #2D8EFE;
  // & > div {
  //   display: inline-block;
  //   margin: 0 20px;
  //   cursor: pointer;
  // }
  .icon-del {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: sub;
    background: url(../../assets/del-bush.png) no-repeat;
    cursor: pointer;
  }
}
</style>
